<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- #ifdef H5 -->
			<view class="download">
				<view v-if="dangqian=='iOS'" class="download_1">
					<text style="margin-top: 20rpx;">为了下次方便使用,请关注公众号</text>
					<a target="_blank" href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkxNDAzMjgxMw==#wechat_redirect">关注公众号</a>
				</view>
				<view v-else class="download_1">
					<text style="margin-top: 20rpx;">为了下次方便使用,请点击下载</text>
					<a target="_blank" :href="download_url">
						下载APP
					</a>
				</view>
			</view>
			<!-- #endif -->
			<view class="grace-wrap" style="width: 750rpx;height:341rpx; background-image: url(../../static/personal_center_diwen.png);background-size: contain;">
				<!-- <text style="font-size:32rpx;font-weight:bold;color:rgba(255,255,255,1);position: relative;top: 143rpx;">{{ name.length>0 ?name:phone }}</text> -->
				<view style="font-size:32rpx;font-weight:bold;color:rgba(255,255,255,1);position: relative;top: 123rpx;left: 148rpx;">{{nickname? nickname:(name?name:'未设置')}}</view>
				<view style="font-size:32rpx;font-weight:bold;color:rgba(255,255,255,1);position: absolute;top:183rpx;margin-top: -10rpx;left: 149rpx;">{{ phone }}</view>
				<!-- 修改实名认证 -->
				<view class="xiugairz" @tap="Goto('/pages/authentication/real_name')">修改</view>
				<!-- 修改实名认证 -->
				<!-- 升级vip -->
				<view class="shengjivip"  @tap="shenj">{{grade}}</view>
				<!-- 升级vip -->
				<view class="grace-flex-center" style="width:690rpx;height:144rpx;background:rgba(255,255,255,1);border-radius:10rpx;position: relative;top:156rpx;left: 30rpx;">
					<view @tap="myorder" class="grace-flex-vcenter grace-columns" style="position: absolute;left: 35rpx;margin-top: 26rpx;">
						<image src="../../static/quanbudingdan.png" style="width: 41rpx;height: 47rpx;"></image>
						<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">全部订单</text>
					</view>
					<view @tap="Goto('/pages/My_order/my_order?curr=' + 1)" class="grace-flex-vcenter grace-columns" style="position: absolute;left: 177rpx;margin-top: 26rpx;">
						<image src="../../static/daifukuan.png" style="width: 45rpx;height: 45rpx;"></image>
						<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">待付款</text>
					</view>
					<view @tap="Goto('/pages/My_order/my_order?curr=' + 2)" class="grace-flex-vcenter grace-columns" style="position: absolute;left: 306rpx;margin-top: 21rpx;">
						<image src="../../static/daifahuo.png" style="width: 51rpx;height: 51rpx;"></image>
						<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">待发货</text>
					</view>
					<view @tap="Goto('/pages/My_order/my_order?curr=' + 3)" class="grace-flex-vcenter grace-columns" style="position: absolute;left: 435rpx;margin-top: 26rpx;">
						<image src="../../static/icon3.png" style="width: 49rpx;height: 44rpx;"></image>
						<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">待收货</text>
					</view>
					<view @tap="Goto('/pages/My_order/my_order?curr=' + 4)" class="grace-flex-vcenter grace-columns" style="position: absolute;left: 564rpx;margin-top: 26rpx;">
						<image src="../../static/daipingjia.png" style="width: 45rpx;height: 45rpx;"></image>
						<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">已完成</text>
					</view>

				</view>
				<view style="width:100rpx;height:100rpx;border-radius:50%;position: relative;bottom: 5rpx;text-align: center;align-items: center;position: absolute;top: 143rpx;left: 30rpx;">
					<image :src="headpic!=null && headpic!='' ?headpic: '../../static/touxia.png'" style="width: 90rpx;height: 90rpx;border-radius: 50rpx;" mode="scaleToFill"></image>
					<!-- <image src="../../static/personal_center_logo.png" style="margin: 10rpx; width: 140rpx;height: 140rpx;"></image> -->
				</view>
			</view>
			<!-- 我的财务 -->
			<view class="caiwus grace-columns">
				<text style="font-size: 30rpx;font-weight: bold;margin-left: 24rpx;margin-top: 21rpx;" @tap="finance">我的财务</text>
				<view class="zhyue">
					<text style="font-size: 22rpx;color: #CCCCCC;">账户余额</text>
					<image src="../../static/jurassic_openeyes.png" mode="" style="width: 37rpx;height: 21rpx;margin-left: 12rpx;"></image>
					<view style="margin-top: 28rpx;">
						<text style="font-size: 35rpx;font-weight: bold;">¥</text>
						<text style="font-size: 35rpx;font-weight: bold;margin-left: 13rpx;">{{shop_balance}}</text>
						<text style="font-size: 28rpx;margin-left: 5rpx;">元</text>
					</view>

				</view>
				<view class="jiangex"></view>
				<view class="djyue">
					<text style="font-size: 22rpx;color: #CCCCCC;">买多券余额</text>
					<image src="../../static/jurassic_openeyes.png" mode="" style="width: 37rpx;height: 21rpx;margin-left: 12rpx;"></image>
					<view style="margin-top: 28rpx;">
						<text style="font-size: 35rpx;font-weight: bold;">¥</text>
						<text style="font-size: 35rpx;font-weight: bold;margin-left: 13rpx;">{{shop_coupon}}</text>
						<text style="font-size: 28rpx;margin-left: 5rpx;">元</text>
					</view>

				</view>
			</view>
			<!-- 功能模块 -->
			<view class="gonengm">
				<view class="grace-flex-vcenter grace-columns" style="position: absolute;left: 20rpx;margin-top: 34rpx;" @tap="business">
					<image src="../../static/fuwu.png" style="width: 66rpx;height: 63rpx;"></image>
					<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">商家服务</text>
				</view>
				<view class="grace-flex-vcenter grace-columns" style="position: absolute;left: 163rpx;margin-top: 34rpx;" @tap="my_clirns">
					<image src="../../static/customer.png" style="width: 49rpx;height: 63rpx;"></image>
					<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">我的客户</text>
				</view>
				<view v-show="u_state=='已认证'" class="grace-flex-vcenter grace-columns" style="position: absolute;left: 292rpx;margin-top: 34rpx;" @tap="mytongka">
					<image src="../../static/toguan.png" style="width:63rpx;height: 63rpx;"></image>
					<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">我的鑫琏卡</text>
				</view>
				<view v-show="u_state=='未认证'" class="grace-flex-vcenter grace-columns" style="position: absolute;left: 292rpx;margin-top: 34rpx;" @tap="tication">
					<image src="../../static/aurhen.png" style="width:63rpx;height: 63rpx;"></image>
					<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">实名认证</text>
				</view>
				<view class="grace-flex-vcenter grace-columns" style="position: absolute;left: 445rpx;margin-top: 34rpx;" @tap="custoner">
					<image src="../../static/huiyuan.png" style="width:63rpx;height: 63rpx;"></image>
					<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">代客下单</text>
				</view>
				<view class="grace-flex-vcenter grace-columns" style="position: absolute;left: 575rpx;margin-top: 34rpx;">
					<image src="../../static/yaoqing.png" style="width:63rpx;height: 64rpx;"></image>
					<text style="position: relative;top: 16rpx;font-size:26rpx;color:rgba(51,51,51,1);">邀请好友</text>
				</view>

			</view>
			

			<view class="grace-columns" style="margin-left: 30rpx;width: 690rpx;height: 452rpx;background-color: #FFFFFF;border-radius: 10rpx;">
				<!-- 设置 -->
				<view class="grace-rows grace-flex-vcenter" style="margin-top: 26rpx;" @tap="settings">
					<image src="../../static/shezi.png" style="margin-left: 32rpx; width: 31rpx;height: 31rpx;"></image>
					<text style="margin-left: 37rpx; font-size:30rpx;font-weight:400;color:rgba(102,102,102,1);">设置</text>
					<image src="../../static/Back.png" style="margin-left: 493rpx; width: 9rpx;height: 15rpx;"></image>
				</view>
					<view style="width: 646rpx;height: 2rpx;background-color: #C0C0C0;margin-left: 17rpx;margin-top: 28rpx;z-index: 9;"></view>
				<view class="grace-rows grace-flex-vcenter" style="margin-top: 26rpx;" @tap="mymessage">
					<image src="../../static/xiaoxi.png" style="margin-left: 32rpx; width: 32rpx;height: 32rpx;"></image>
					<text style="margin-left: 37rpx; font-size:30rpx;font-weight:400;color:rgba(102,102,102,1);">我的消息</text>
					<image src="../../static/Back.png" style="margin-left: 433rpx; width: 9rpx;height: 15rpx;"></image>
				</view>
				<view style="width: 646rpx;height: 2rpx;background-color: #C0C0C0;margin-left: 17rpx;margin-top: 28rpx;z-index: 10;"></view>
				<view class="grace-rows grace-flex-vcenter" style="margin-top: 26rpx;" @tap="settings">
					<image src="../../static/wodebangzhuzhongxin.png" style="margin-left: 32rpx; width: 32rpx;height: 32rpx;"></image>
					<text style="margin-left: 37rpx; font-size:30rpx;font-weight:400;color:rgba(102,102,102,1);">帮助中心</text>
					<image src="../../static/Back.png" style="margin-left: 433rpx; width: 9rpx;height: 15rpx;"></image>
				</view>
				<view style="width: 646rpx;height: 2rpx;background-color: #C0C0C0;margin-left: 17rpx;margin-top: 28rpx;z-index: 10;"></view>
				<!-- Goto('/pages/personal_center/change_password') -->
				<!-- 联系客服 -->
				<view @tap="qiaozhuandaokehu" class="grace-rows grace-flex-vcenter" style="margin-top: 26rpx;">
					<image src="../../static/kefu.png" style="margin-left: 32rpx; width: 34rpx;height: 34rpx;"></image>
					<text style="margin-left: 37rpx; font-size:30rpx;font-weight:400;color:rgba(102,102,102,1);">联系客服</text>
					<image src="../../static/Back.png" style="margin-left: 433rpx; width: 9rpx;height: 15rpx;"></image>
				</view>
				<view style="width: 646rpx;height: 2rpx;background-color: #C0C0C0;margin-left: 17rpx;margin-top: 28rpx;z-index: 10;"></view>
				<!-- 版本号 -->
				<view @tap="qwst" class="grace-rows grace-flex-vcenter" style="margin-top: 15rpx;">
					<image src="../../static/guanyuwomen.png" style="margin-left: 32rpx; width: 33rpx;height: 33rpx;"></image>
					<text style="margin-left: 37rpx; font-size:28rpx;font-weight:400;color:rgba(102,102,102,1);">版本号</text>
					<text v-if="is_update==0" style="margin-left: 405rpx; font-size:20rpx;font-weight:400;color:rgba(102,102,102,1);">{{banbenhao}}</text>
					<text v-if="is_update==1" style="margin-left: 405rpx; font-size:20rpx;font-weight:400;color:rgba(218,28,30,1);">{{banbenhao}}</text>
				</view>
			</view>


			<view style="margin-bottom: 50rpx;margin-top: 20rpx;">
				<button type="primary" @tap="outlogin" class="grace-button" style="width:702rpx;height:80rpx;background:rgba(218,28,30,1);border-radius:10rpx;font-weight:bold;color:rgba(255,255,255,1);font-size:32rpx;">退出登录</button>
			</view>

			<graceDialog :isTitle="false" :show="shenyu" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;height: 200rpx;margin-top: 30rpx;">
					<text style="font-size: 26rpx;">{{ tanchuang_text }}</text></br>
					<view style="margin-top: 20rpx;">
						<text style="font-weight: bold;font-size: 35rpx;">{{flows}}</text>
					</view>
				</view>

				<view slot="btns" style="text-align: center;width: 100%;height: 50rpx;background-color: #DA1C1E;color: #FFFFFF;line-height: 50rpx;border-radius: 0 0 10rpx 10rpx; ">
					<text class="grace-dialog-buttons" style="" @tap="closefirm2">我知道了</text>
				</view>
			</graceDialog>
			<!-- 实名认证提示弹框 -->
			<!-- :maskClick="false" -->
			<uni-popup ref="popup" type="center">
				<view class="popup">
					<view style="text-align: center;padding-top: 20rpx;">
						<text>提示</text>
					</view>
					<view style="margin-left: 30rpx;margin-top: 30rpx;">
						<text>您还未实名认证，部分功能将不能暂时不能使用，请先实名认证！</text>
					</view>

					<view style="text-align: center;width: 250rpx;height: 50rpx;background-color: #DA1C1E;color: #FFFFFF;line-height: 50rpx;border-radius: 0 0 0rpx 10rpx; position: absolute;bottom: 0;">
						<text class="grace-dialog-buttons" style="" @tap="popup_s">去认证</text>
					</view>
					<view style="text-align: center;width: 250rpx;height: 50rpx;background-color: RGBA(252, 99, 102, 1);color: #FFFFFF;line-height: 50rpx;border-radius: 0 0 10rpx 0rpx; position: absolute;bottom: 0;left: 250rpx;">
						<text class="grace-dialog-buttons" style="" @tap="popup_qux">取消</text>
					</view>
				</view>
			</uni-popup>
			<ourLoading isFullScreen active text="加载中..." v-if="!loadings" />
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				nickname: null, //昵称
				name: '鑫琏卡', //用户姓名
				shop_balance: '', // 账户余额数据
				shop_coupon: '0.00', // 买多券余额数据
				headpic: null, //头像
				u_state: "", //认证状态
				u_pid: '', //用户推荐人信息[没有为空，有是json对象]
				phone: '12345678914', //用户手机
				identity: '暂无信息',
				is_update: 0,
				banbenhao: '', // 版本号
				grade: '', // 用户等级
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
				shenyu: false,
				tanchuang_text: '可使用积分余额为',
				flows: '',
				is_cang: 1,
				loadings: false,
				dangqian: 'Android',
				download_url: '',
			}
		},
		onReady() {
			var vm = this;

			setTimeout(function() {
				vm.loadings = true
			}, 800)
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
			var vm = this;
				vm.name='';
				vm.u_state='';
				vm.phone='';
			this.myPost(
				'/api/Userapi/getuser', {},
				function(res) {
					console.log(res);
					var data = res.data;
					vm.phone = data.phone;
					vm.name = data.name;
					vm.shop_balance = data.money
					// vm.shop_coupon = data.shop_coupon
					vm.headpic = data.head_img;
					vm.nickname = data.nickname;
					vm.identity = data.identity;
					vm.grade = data.level.name
					var stater = data.authentication
					if(stater==1){
						vm.u_state = '已认证'
					}else if(stater==0){
						vm.u_state = '未认证'
					}
				}
			)
		},
		onLoad() {},
		methods: {
			qwst() {
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						console.log('运行Android上')
						if (this.is_update === 1) {
							this.Goto('/pages/update/update')
						}
						break;
					case 'ios':
						console.log('运行iOS上')
						if (this.is_update === 1) {
							uni.showToast({
								title: '请安装最新版本！',
								icon: 'none'
							})
						}

						break;
					default:
						console.log('运行在开发者工具上')
						break;
				}
			},
			// 点击查看积分余额弹框显示
			// shenyujifei(){
			// 	var vm = this
			// 	vm.req.post(
			// 		vm.lochost + '/mytrunk/userapi/getuserinfo',{},{},
			// 		function(res){
			// 			console.log(res.data.flows);
			// 			vm.flows = res.data.flows
			// 			vm.shenyu = true
			// 		}
			// 	)

			// },
			closefirm2() {
				this.shenyu = false
			},
			// 去认证
			popup_s() {
				this.Goto('/pages/authentication/non_real_name')
				this.$refs.popup.close()
			},
			// 隐藏去认证弹框提示
			popup_qux() {
				this.$refs.popup.close()
			},
			// 收货地址跳转路径
			address() {
				this.Goto('/pages/Shipping_address/Manage_address')
			},
			// 我的订单跳转路径
			myorder() {
				this.Goto('/pages/My_order/my_order?curr=' + 0)
			},
			// 我的消息跳转路径
			mymessage() {
				this.Goto('/pages/My_message/my_message')
			},
			// 购物车跳转路径
			cart() {
				this.Goto('/pages/Shopping_cart/Shopping_cart')
			},
			// 系统设置跳转路径
			settings() {
				this.Goto('/pages/System_settings/System_settings')
			},
			// 商家服务跳转路径
			business() {
				this.Goto('/pages/personal_center/Business_services')
			},
			// 我的桐罐卡跳转路径
			mytongka() {
				this.Goto('/pages/index/index1')
			},
			// 升级VIP跳转路由
			shenj() {
				uni.switchTab({
					url: '/pages/rise_vip/rise_vip'
				});
			},
			// 我的财务页面跳转事件
			finance() {
				this.Goto('/pages/personal_center/my_finance?shop_balance=' + this.shop_balance + '&shop_coupon='+ this.shop_coupon)
			},
			// 我的客户页面跳转事件
			my_clirns() {
				this.Goto('/pages/my_clients/my_clients')
			},
			// 代客下单页面跳转事件
			custoner() {
				this.Goto('/pages/personal_center/customers')
			},
			// 退出登录事件
			outlogin() {
				uni.clearStorageSync()
				uni.redirectTo({
					url: '/pages/user/login'
				})
			},
			drag_start(event) {
				console.log(event.touches[0].clientX - event.target.offsetLeft);
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < 0) {
					tag[0].clientX = 0
				}
				if (tag[0].clientY < 0) {
					tag[0].clientY = 0
				}
				if (tag[0].clientX > this.windowWidth) {
					tag[0].clientX = this.windowWidth
				}
				if (tag[0].clientY > this.windowHeight) {
					tag[0].clientY = this.windowHeight
				}
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
			},
			// 
			qiaozhuandaokehu() {
				var token = uni.getStorageSync('user_token');
				console.log(token);
				uni.navigateTo({
					url: "/pages/web_view/web_views?token=" + token
				})
			},
		},
		components: {
			gracePage,
			graceDialog
		}

	}
</script>

<style>
	.kef_s {
		position: absolute;
		top: 520rpx;
		left: 600rpx;
		z-index: 9999;
		float: right;
	}

	.xiugairz {
		position: absolute;
		width: 81rpx;
		height: 37rpx;
		border: 1rpx solid #FFFFFF;
		border-radius: 14rpx;
		top: 135rpx;
		left: 639rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 37rpx;
		font-size: 20rpx;
	}

	.shengjivip {
		position: absolute;
		height: 32rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		top: 221rpx;
		left: 149rpx;
		color: rgba(255, 18, 23, 1);
		text-align: center;
		line-height: 32rpx;
		padding-left: 15rpx;
		padding-right: 16rpx;
		font-size: 21rpx;
	}

	.popup {
		width: 500rpx;
		height: 300rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
	}

	.download {
		position: fixed;
		z-index: 999;
		top: 0;
		width: 750rpx;
		height: 78rpx;
		padding-left: 1rpx;
		margin-left: -1rpx;
		margin-top: -1rpx;
		background-image: url(../../static/to.png);
		/* background-color: rgba(251, 18, 24, 1); */
	}

	.download_1 {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-right: 30rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		line-height: 44rpx;
		text-align: center;
	}

	.download_1 a {
		width: 124rpx;
		height: 44rpx;
		border-radius: 22rpx;
		background-color: #FFFFFF;
		text-decoration: none;
		color: rgba(251, 18, 23, 1);
		font-size: 22rpx;
		margin-top: 22rpx;
	}

	.caiwus {
		/* position: absolute; */
		width: 690rpx;
		height: 224rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 102rpx;
		margin-left: 30rpx;
	}

	.zhyue {
		margin-top: 35rpx;
		margin-left: 25rpx;
	}

	.jiangex {
		position: absolute;
		left: 344rpx;
		margin-top: 68rpx;
		width: 5rpx;
		height: 145rpx;
		background-color: #F4F4F4;
	}

	.djyue {
		position: absolute;
		left: 374rpx;
		margin-top: 93rpx;
	}

	.gonengm {
		position: relative;
		width: 690rpx;
		height: 181rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx 30rpx;
	}

	.xiange {
		/* z-index: 9; */
		width: 646rpx;
		height: 1rpx;
		background-color: #C0C0C0;
		margin-left: 17rpx;
		margin-top: 28rpx;
	}
</style>
